{extend name="index/index"}
{block name="body"}
<div id="app" class="aminui">
    <!-- 加载动画 -->
    <div class="app-loading">
        <div class="app-loading__logo">
            {if sysconf('site_icon')}
            <el-image src="{:sysconf('site_icon')}" />
            {else}
            <el-image src="__ROOT__/static/theme/img/logo.png" />
            {/if}
        </div>
        <div class="app-loading__loader"></div>
        <div class="app-loading__title">{:sysconf('app_name')}{if sysconf('app_version')}<sup class="is-fixed">{:sysconf('app_version')}</sup>{/if}</div>
    </div>
    <div class="login_bg">
        <div class="login_adv" {$loginStyle|raw}>
            <div class="login_adv__title">
				<h2>{:sysconf('app_name')}{if sysconf('app_version')}<sup class="is-fixed">{:sysconf('app_version')}</sup>{/if}</h2>
				<h4>{:lang('login.slogan')}</h4>
                <p>{:lang('login.describe')}</p>
				<div>
					<span>
						<i class="ri-vuejs-line"></i>
					</span>
					<span>
						<el-icon class="add"><plus /></el-icon>
					</span>
					<span>
						<el-icon><eleme-filled /></el-icon>
					</span>
				</div>
            </div>
			<div class="login_adv__mask"></div>
			<div class="login_adv__bottom">
				{if sysconf('site_copy')}{:sysconf('site_copy')}{/if}
			</div>
        </div>
        <div class="login_main">
            <div class="login_config">
                <el-button :icon="config.dark?'sunny':'moon'" circle type="info" @click="configDark"></el-button>
                <el-dropdown trigger="click" placement="bottom-end" @command="configLang">
                    <el-button circle><i class="ri-translate-2"></i></el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item v-for="item in lang" :key="item.value" :disabled=config.lang==item.value :command="item" :class="{'selected':config.lang==item.value}">{{item.name}}</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div class="login-form">
                <div class="login-header">
                    <div class="logo">
                        <img alt="{:sysconf('app_name')}" src="__ROOT__/static/theme/img/logo.png" />
                        <label>{:sysconf('app_name')}{if sysconf('app_version')}<sup class="is-fixed">{:sysconf('app_version')}</sup>{/if}{:sysconf('login_name')}</label>
                    </div>
                </div>
                <el-tabs>
                    <el-tab-pane label="{:lang('login.accountLogin')}" lazy>
                        <el-form ref="loginFormAccount" :model="form" :rules="rules" label-width="0" size="large">
                            <el-form-item prop="account.user">
                                <el-input v-model="form.account.user" prefix-icon="user" clearable placeholder="{:lang('login.userPlaceholder')}" :minlength="4" autofocus @keyup.enter="this.$refs['pwdInput'].focus()"></el-input>
                            </el-form-item>
                            <el-form-item prop="account.password">
                                <el-input v-model="form.account.password" prefix-icon="lock" clearable show-password placeholder="{:lang('login.PWPlaceholder')}" :minlength="4" @keyup.enter="login('account')" ref="pwdInput"></el-input>
                            </el-form-item>
                            <el-form-item prop="account.captcha" class="captcha" v-show>
                                <el-input v-model="form.account.captcha" prefix-icon="picture" clearable placeholder="{:lang('login.verifPlaceholder')}" :maxlength="4" @keyup.enter="login('account')">
                                    <template #append>
                                        <label @click="captcha" style="height: 40px;" data-captcha="{:url('admin/login/captcha',[],false)}" data-field-verify="verify" data-field-uniqid="uniqid" data-captcha-type="{$captchaType}" data-captcha-token="{$captchaToken}"></label>
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item style="margin-bottom: 10px;">
                                <el-col :span="12">
                                    <el-checkbox label="{:lang('login.rememberMe')}" v-model="form.autologin"></el-checkbox>
                                </el-col>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" style="width: 100%;" :loading="islogin" round @click="login('account')">{:lang('login.signIn')}</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="{:lang('login.mobileLogin')}" lazy>
                        <el-form ref="loginFormPhone" :model="form" :rules="rules" label-width="0" size="large">
                            <el-form-item prop="phone.phone">
                                <el-input v-model.number="form.phone.phone" prefix-icon="iphone" clearable placeholder="{:lang('login.mobilePlaceholder')}" :maxlength="11">
                                    <template #prepend>+86</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="phone.yzm"  style="margin-bottom: 35px;">
                                <div class="login-msg-yzm">
                                    <el-input v-model.number="form.phone.yzm" prefix-icon="unlock" clearable placeholder="{:lang('login.smsPlaceholder')}" :maxlength="6" @keyup.enter="login('phone')" oninput="value=value.replace(/[^0-9.]/g,'')"></el-input>
                                    <el-button @click="getYzm" :disabled="form.phone.disabled">{:lang('login.smsGet')}<span v-if="form.phone.disabled"> ({{form.phone.time}})</span></el-button>
                                </div>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" style="width: 100%;" :loading="islogin" round @click="login('phone')">{:lang('login.signIn')}</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</div>
<script>
    const App = {
        data() {
            return {
				config: {
					lang: "{:cookie('lang')}",
					dark: false,
				},
				form: {
                    account: {
                        user: "",
                        password: "",
                        captcha:"",
                        uniqid:"",
                    },
                    phone: {
                        phone: "",
                        yzm: "",
                        disabled: false,
				        time: 60,
                    },
					autologin: false
				},
				lang: [
					{
						name: '简体中文',
						value: 'zh-cn',
					},
					{
						name: 'English',
						value: 'en-us',
					}
				],
				rules: {
                    account: {
                        user: [
                            {required: true, message: "{:lang('login.userError')}", trigger: 'blur'},
                            {min: 4, message: "{:lang('login.userLengthError')}", trigger: 'blur' },
                        ],
                        password: [
                            {required: true, message: "{:lang('login.PWError')}", trigger: 'blur'},
                            {min: 4, message: "{:lang('login.PWLengthError')}", trigger: 'blur' },
                        ],
                        captcha: [
                            {required: true, message: "{:lang('login.verifError')}", trigger: 'blur'},
                            {min: 4, max: 4, message: "{:lang('login.verifLengthError')}", trigger: 'blur' },
                        ],
                    },
                    phone: {
                        phone: [
                            {required: true, message: "{:lang('login.mobileError')}"},
                            {pattern: /^1[3-9]\d{9}$/, message: "{:lang('login.mobileLengthError')}", trigger: 'blur' }
                        ],
                        yzm: [
                            {required: true, message: "{:lang('login.smsError')}"},
                            {min: 11, max: 6, message: "{:lang('login.smsLengthError')}", trigger: 'blur' },
                        ]
                    }
				},
				islogin: false,
            };
        },
        methods: {
            // loading加载
            loading() {
                setTimeout(() => {
                    document.querySelector('.app-loading').remove();
                }, 500);
            },
            // 切换颜色主题
			configDark() {
				this.config.dark = this.config.dark ? false : true
			},
            // 切换语言
			configLang(command) {
				this.config.lang = command.value
			},
            captcha() {
                this.$nextTick(async ()=>{
                    var captcha = document.querySelector('[data-captcha]');
                    var action  = captcha.getAttribute('data-captcha') || location.href;
                    var type    = captcha.getAttribute('data-captcha-type') || 'captcha-type', token = captcha.getAttribute('data-captcha-token') || 'captcha-token';
                    var uniqid  = captcha.getAttribute('data-field-uniqid') || 'captcha-uniqid', verify = captcha.getAttribute('data-field-verify') || 'captcha-verify';
                    var verify  = await $API.captcha.post(action,{type: type, token: token});
                    if (verify.code)
                    {
                        captcha.innerHTML="<img alt='img' src='" + verify.data.image + "'><input type='hidden' name="+ uniqid +" value=" + verify.data.uniqid +">";
                        this.form.account.captcha = verify.data.code;
                        this.form.account.uniqid  = verify.data.uniqid;
                        return (verify.data.code || document.querySelector('.captcha').setAttribute('style', 'display:block;')), false;
                    }
                })
            },
            // 登陆
            async login(type) {
                let self = this;
                if (type == "account") {
                    var validate = await this.$refs.loginFormAccount.validate().catch(()=>{})
                    if(!validate){ return false }
                    this.islogin = true

                    var data = {
                        username: self.form.account.user,
                        password: await $TOOL.crypto.MD5(await $TOOL.crypto.MD5(self.form.account.password) + self.form.account.uniqid),
                        verify:self.form.account.captcha,
                        uniqid:self.form.account.uniqid
                    }
                    var user = await $API.login.post(location.href+"?type=account", data)
                    if (parseInt(user.code)!== 1) {
                        this.$message.error(user.info);
                        this.islogin = false;
                        this.captcha();
                    } else {
                        this.islogin = false;
                        this.$message.success(user.info);
                        setTimeout(() => {
                            location.href = user.data;
                        },1000);
                    }
                } else {
                    var validate = await this.$refs.loginFormPhone.validate().catch(()=>{})
                    if(!validate){ return false }
                    
                    this.islogin = true
                }
            },
			async getYzm(){
				var validate = await this.$refs.loginFormPhone.validateField("phone").catch(()=>{})
				if(!validate){ return false }
				this.form.phone.disabled = true
				this.form.phone.time = 60
				var t = setInterval(() => {
					this.form.phone.time -= 1
					if(this.form.phone.time < 1){
						clearInterval(t)
						this.form.phone.disabled = false
						this.form.phone.time = 0
					}
				},1000)
            }
        },
        watch:{
			'config.dark'(val) {
				if(val){
					document.documentElement.classList.add("dark")
				}else{
					document.documentElement.classList.remove("dark")
				}
			},
			async 'config.lang'(val) {
                var lang = await $API.lang.get("{:url('login/lang')}", {'lang':val});
                if (lang.code) this.$message.success(lang.info); setTimeout(() => {location.reload();},1000);
			},
        },
        mounted () {
            this.loading();
            this.captcha();
        },
    }
</script>
{/block}